<template>
  <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%" :row-class-name="tableRowClassName">
    <el-table-column label="日期" prop="Date" />
    <el-table-column label="楼盘名称"  prop="Type" />
    <el-table-column label="房源类型"  prop="Address" />
    <el-table-column label="门牌号"   prop="HomeNumber" />
    <el-table-column label="房源户型"  prop="HouseSize" />
    <el-table-column label="户主"   prop="Host" />
    <el-table-column align ="right">
        <template #header>
          <el-input v-model="search" size="small" placeholder="Type to search" />
        </template>
      </el-table-column>
  </el-table>
  <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
      />
</template>

<script lang="ts" setup>
import { ref,computed } from "vue"

interface User {
  Date: string
  Type: string
  Address: string
  HomeNumber: number
  HouseSize: string
  Host: string
}
const search = ref('')
// 使用计算属性处理数据
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.Host.toLowerCase().includes(search.value.toLowerCase())
  )
)

// 设置需要的参数与方法
const currentPage4 = ref(1)
const pageSize4 = ref(10)
// 修改下面得方法
const handleSizeChange = (val: number) => {
  //一页显示多少条
  pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
  //页码更改方法
  currentPage4.value = val;
}

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if ((rowIndex + 1) % 2 === 0) {
    return 'warning-row';
  }
  return 'success-row';
}

const tableData: User[] = [
  {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '汤臣一品',
    HomeNumber: 101,
  HouseSize: '三房两厅',
  Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '汤臣一品',
    HomeNumber: 101,
  HouseSize: '三房两厅',
  Host: 'Lalisa'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
  HouseSize: '三房两厅',
  Host: 'Lalisa'
  },
  {
    Date: '2016-05-01',
    Type: '商铺',
    Address: '翻斗花园',
    HomeNumber: 246,
  HouseSize: '一厨一卫二室',
  Host: 'Lalisa'
  }, {
    Date: '2016-05-03',
    Type: '商铺',
    Address: '翻斗花园',
    HomeNumber: 246,
    HouseSize: '一厨一卫二室',
    Host: 'Lalisa'
  },
  {
    Date: '2016-05-02',
    Type: '商铺',
    Address: '翻斗花园',
    HomeNumber: 246,
    HouseSize: '一厨一卫二室',
    Host: 'Lalisa'
  },
  {
    Date: '2016-05-04',
    Type: '商铺',
    Address: '翻斗花园',
    HomeNumber: 246,
    HouseSize: '一厨一卫二室',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '凶宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '凶宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '凶宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '凶宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '凶宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '凶宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '汤臣一品',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jisoo'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '翻斗花园',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '开心冷包蛇',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  }, {
    Date: '2016-05-03',
    Type: '住宅',
    Address: '开心冷包蛇',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-02',
    Type: '住宅',
    Address: '开心冷包蛇',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-04',
    Type: '住宅',
    Address: '开心冷包蛇',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
  {
    Date: '2016-05-01',
    Type: '住宅',
    Address: '开心冷包蛇',
    HomeNumber: 101,
    HouseSize: '三房两厅',
    Host: 'Jennie'
  },
]
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
